<template>
  <div class="container">
    <div class="uni-forms-box">
      <uni-forms
        ref="form"
        :modelValue="form"
        :rules="rules"
        label-width="100px"
        label-align="left"
      >
        <uni-forms-item label="姓名" name="name">
          <uni-easyinput type="text" v-model="form.name" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="工号" name="cardType">
          <uni-easyinput
            type="text"
            v-model="form.cardType"
            placeholder="请输入"
          />
        </uni-forms-item>
      </uni-forms>
    </div>
    <div class="submit-bottom">
      <button @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      imageStyles: {
        width: 64,
        height: 64,
        border: {
          radius: "10%",
        },
      },
      listStyles: {
        // 是否显示边框
        border: true,
        // 是否显示分隔线
        dividline: true,
        // 线条样式
        borderStyle: {
          width: 1,
          color: "blue",
          style: "dashed",
          radius: 2,
        },
      },
    };
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100vw;
  background-color: #fff;
}
.uni-forms-box {
  padding: 20px;
  background-color: #fff;
}
.submit-bottom {
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 20px 0;
  background-color: #fff;
  button {
    background-color: #0d7cff;
    color: #fff;
    margin: 0 1.25rem;
  }
}
::v-deep .icon-add {
  width: 25px !important;
}
.uni-forms-box-form {
  margin-bottom: 5rem;
}
</style>